<template>
    <div>
        <el-container style=" font: 16px '微软雅黑';">
            <el-header style="text-align: right; font-size: 18px; background-color: #F3F3F3;height: 50px;">
                <div
                        style="float: left; border-left: 4px solid limegreen;margin: 13px 0px 0px -20px;">&nbsp;&nbsp;&nbsp; 微圈管理</div>
                <el-button @click="refresh">
                    <i class="el-icon-refresh"></i>
                    刷新
                </el-button>
                <el-button @click="back">
                    <i class="el-icon-arrow-left"></i>
                    返回
                </el-button>
            </el-header>
            <el-container>
                <!--树形分类-->
                <el-aside width="200px" >
                    <div class="tree" >
                        <el-tree style="background-color: #F6F7F9" default-expand-all :data="data" :props="defaultProps"
                                  @node-click="handleNodeClick"></el-tree>
                    </div>
                </el-aside>
                <el-container>
                    <el-main style="height: 800px">
                        <el-header style="text-align: left; background-color: #F3F3F3;">
                            <div class="rg">
                                <i class="el-icon-search"></i>
                                <el-button type="text" style="color: black" @click="showInquire">筛选查询</el-button>
                            </div>
                            <div class="lf">
                                <span class="collect" v-show="collectShow">
                                    <i class="el-icon-arrow-up"></i>
                                    <el-button type="text" style="color: black" @click="closecx">收起筛选</el-button>
                                </span>
                                <el-button style="margin: 20px" @click="highCX">高级查询</el-button>
                            </div>
                        </el-header>
                        <div class="cxInput" v-show="collectShow">
                            <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="onSubmit">
                                <el-form-item label="输入文章名称">
                                    <el-input v-model="formInline.articleKeywords" placeholder="请输入文章名称关键词"></el-input>
                                </el-form-item>
                                <el-form-item label="用户账号">
                                    <el-input v-model="formInline.account" placeholder="请输入用户账号"></el-input>
                                </el-form-item>
                                <el-form-item label="用户昵称">
                                    <el-input v-model="formInline.nickname" placeholder="请输入用户昵称"></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                        <!--数据列表-->
                        <div class="tab">
                            <div class="tabHead">
                                <div class="zuo">
                                    <i class="el-icon-s-unfold"></i>
                                    <span>商品评论列表</span>
                                </div>
                            </div>
                            <!-- 使用 selection-change监听选项改变，传入一个函数名 -->
                            <el-table
                                    ref="multipleTable"
                                    :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                                    tooltip-effect="dark"
                                    style="width: 100%;heigh:800px"
                                    @selection-change="handleSelectionChange">
                                <!-- type="selection" 生成多选 -->
                                <el-table-column type="selection" width="30"></el-table-column>
                                <el-table-column label="编号" width="100" sortable prop="userId"></el-table-column>
                                <el-table-column prop="nickname" label="用户昵称" width="100"></el-table-column>
                                <el-table-column prop="articleTitle" label="文章名称" width="100"></el-table-column>
                                <el-table-column prop="createDate" label="创建时间" width="160"></el-table-column>
                                <el-table-column prop="account" label="用户账号" width="120"></el-table-column>
                                <el-table-column prop="articleLike" label="点赞数" width="80"></el-table-column>
                                <el-table-column prop="articleHis" label="查看量" width="80"></el-table-column>
                                <el-table-column prop="articleShare" label="分享量" width="80"></el-table-column>
                                <el-table-column label="排序（点赞量）" width="120">{{num}}</el-table-column>
                                <el-table-column label="操作" width="120">
                                    <template slot-scope="scope">
                                        <router-link :to="{name:'details',params:{id:scope.row.microcircleId}}">详情</router-link>
                                        &nbsp;
                                        <a @click.prevent="del(scope.row.microcircleId)">删除</a>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <!-- 分页器 -->
                            <div class="block" style="margin-top:15px;">
                                <el-select v-model="value" placeholder="批量操作">
                                    <el-option v-for="item in options" :key="item.value" :value="item.value"
                                               :label="item.label" >
                                        <el-button @click="deleteSelectItem">{{item.label}}</el-button>
                                    </el-option>
                                </el-select>
                                <el-pagination class="fenye" align='center' @size-change="handleSizeChange"
                                                @current-change="handleCurrentChange"
                                               :current-page="currentPage"
                                               :page-sizes="[1,4,5,10,20]"
                                               :page-size="pageSize"
                                               layout="total, sizes, prev, pager, next, jumper"
                                               :total="tableData.length">
                                </el-pagination>
                            </div>
                        </div>
                        <!--高级检索-->
                        <div class="gaoji">
                            <el-dialog :title="title" :visible.sync="dialogVisible" width="48%">
                                <el-form ref="form" :model="form" label-width="80px">
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="用户账号" prop="account">
                                                <el-input v-model="form.account" placeholder="请输入用户账号"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="创建时间" prop="createDate">
                                                <el-date-picker v-model="form.createDate" placeholder="请输入创建时间"
                                                                value-format="yyyy-MM-dd hh:mm:ss"
                                                                style="width: 265px"></el-date-picker>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="点赞数" prop="account">
                                                <el-input v-model="form.articleLike" placeholder="请输入点赞数"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="文章序号" prop="createDate">
                                                <el-input v-model="form.serialNumber" placeholder="请输入文章序号"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="查看量" prop="account">
                                                <el-input v-model="form.articleHis" placeholder="请输入查看量"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="分享量" prop="createDate">
                                                <el-input v-model="form.articleShare" placeholder="请输入分享量"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                                <span slot="footer" class="dialog-footer">
                                    <el-button type="success" plain @click="handleRefresh">重置</el-button>
                                    <el-button type="success" @click="dialogVisibleYes">开始检索</el-button>
                                </span>
                            </el-dialog>
                        </div>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "TinyCircle",
        data(){
            return{
                title: '高级检索', //弹出层标题
                dialogVisible: false, //是否显示弹出层
                form:{
                    account:"",//账号
                    createDate:"",//创建时间
                    articleLike:"",//点赞数
                    serialNumber:"",//序号
                    articleHis:"",//查看量（点击数）
                    articleShare:""//分享量
                },
                collectShow:false,
                formInline:{
                    articleKeywords:"",
                    account:"",
                    nickname:""
                },
                value:"",
                options:[{
                    value:'dels',
                    label:'批量删除'
                }],
                multipleSelection:[],
                num:0,
                data:[],
                defaultProps:[
                    {
                        children: 'children',
                        label: 'label'
                    }
                ],
                tableData:[],
                tableData2:[],
                tableData3:[],
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 4 // 每页的数据条数
            }
        },
        methods:{
            //返回上一级页面
            back(){
                this.$router.back();
            },
            //重置检索
            handleRefresh(done) {
                this.form.account = "";
                this.form.createDate = "";
                this.form.articleLike = "";
                this.form.serialNumber = "";
                this.form.articleHis = "";
                this.form.articleShare = "";
            },
            //弹窗确定
            dialogVisibleYes() {
                let url = "/microcircle/getLike";
                var search = new URLSearchParams();
                search.append("account",this.form.account);
                // search.append("createDate",this.form.createDate);
                search.append("articleLike",this.form.articleLike);
                search.append("serialNumber",this.form.serialNumber);
                search.append("articleHis",this.form.articleHis);
                search.append("articleShare",this.form.articleShare);
                this.$http.post(url,search,{
                    headers:{
                        'C':'application/x-www-form-urlencoded'
                    }
                }).then(res=>{
                    console.log(res);
                    this.tableData = [];
                    this.tableData3 = [];
                    this.tableData = res.data;
                    this.tableData3 = res.data;
                    this.dialogVisible = false;
                })
            },
            highCX(){
                this.dialogVisible = true;
            },
            showInquire(){
                this.collectShow=true
            },
            onSubmit(){
                this.$http.get('/microcircle/getLike',{
                    params:{articleKeywords:this.formInline.articleKeywords,
                        account:this.formInline.account,
                        nickname:this.formInline.nickname}
                }).then(res =>{
                    this.tableData = [];
                    this.tableData3 = [];
                    this.tableData = res.data;
                    this.tableData3 = res.data;
                })
            },
            handleNodeClick(data) {
                this.tableData = this.tableData3
                this.tableData2 = []
                for (var i = 0; i < this.tableData.length; i++) {
                    if (this.tableData[i].articleCategrayId == data.id) {
                        this.tableData2.push(this.tableData[i]);
                    }
                }
                this.tableData = this.tableData2;
            },
            closecx(){
                this.collectShow=false
            },
            getNodes(){
              this.$http.get('/courseClass/getTreeNode')
                  .then(res => {
                      this.data = res.data
                  })
            },
            getTableData(){
                this.$http.get('/microcircle/getTableData')
                    .then(res => {
                        this.tableData = res.data;
                        this.tableData3 = res.data;

                        this.sort()
                    })
            },
            deleteSelectItem() {
                this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    //遍历获得多选选中的index值
                    this.multipleSelection.forEach((value, index) => {
                        //遍历多选框获取的数据
                        this.tableData.forEach((v, i) => {
                            //遍历数据表，任意一个属性值相同，则说明该数据被选中，其i则为索引值
                            if (value.microcircleId == v.microcircleId) {
                                this.tableData.splice(i, 1);
                                this.$http.get('/microcircle/delete/', {
                                    params: {
                                        id: v.microcircleId
                                    }
                                });
                            }
                        });
                    });
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                    console.log("删除成功");
                }).catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
            },
            //获取多选的数据
            handleSelectionChange(val){
                this.multipleSelection = val;//存储选中的数据
                console.log(val);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
            sort() {
                var max=this.tableData[0].articleLike;
                for (const key in this.tableData) {
                    if(max < this.tableData[key].articleLike){
                        max=this.tableData[key].articleLike;
                        this.num = key;
                    }
                }
                // return this.num;
            },
            refresh(){
                this.getNodes();
                this.getTableData();
            },
            // 通过id值将用户删除
            async del(id){
                // 弹框询问用户是否删除数据
                // 第一个参数是提示信息   第二个参数是对话框的标题
                const confirmResult =  await  this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    // 指定确认按钮的文本
                    confirmButtonText: '确定',
                    //指定取消按钮的文本
                    cancelButtonText: '取消',
                    //通过type指定提示信息前面的小图标
                    type: 'warning'
                }).catch(err=>{
                    // 这个捕获一下错误，要不然我们点击“取消”按钮之后控制台会报错
                    return err
                })

                // 如果用用户确认删除，则返回值为字符串 confirm
                // 如果用户取消了删除，则返回值为字符串 cancel
                // console.log(confirmResult)

                if(confirmResult !=='confirm'){
                    // 说明用户不想删除
                    return this.$message.info('已取消删除')
                }
                //  console.log('确认删除')
                const {data:res} = await this.$http.get('/microcircle/delete/',{
                    params:{
                        id:id
                    }
                });


                /*if(res.status !==200){
                    return this.$message.error('删除用户失败')
                }
*/
                this.$message.success('删除用户成功！')
                this.getTableData();
            }
        },
        created() {
            this.getNodes();
            this.getTableData();
        }
    }
</script>

<style scoped>
    .lf{
        margin: -60px 0px 0px 610px;
    }
    .rg{
        padding: 10px 0px 0px 0px ;
    }
    .cxInput{
        margin-top: 20px;
    }
    .el-form--inline .el-form-item {
        display: inline-block;
        margin-right: 6px;
        vertical-align: top;
    }
    .tree{
        margin: 100px 0px 0px 25px;
    }
    .tabHead{
        background-color: #F3F3F3;
    }
    .zuo{
        margin: 5px 0px 10px 0px;
        width: 120px;
        padding: 16px 0px 20px 0px;
    }
    a{
        color: green;
    }
    .fenye{
        width: 500px;
        margin: -35px 0px 0px 339px;
    }

</style>